<template>
  <div class="login">
    <div class="form">
      <div class="tabs justify-content-between">
        <div
          class="tab"
          :class="tabActive == 1 ? 'active' : ''"
          @click="switchTab(1)"
        >
          登录
        </div>
        <div
          class="tab"
          :class="tabActive == 2 ? 'active' : ''"
          @click="switchTab(2)"
        >
          注册
        </div>
      </div>
      <div class="login-content" v-if="tabActive == 1">
        <div class="list">
          <input
            type="text"
            placeholder="请输入账户名"
            v-model="loginName"
            @keyup.enter="login"
          />
          <div class="icon">
            <img src="../assets/images/icon-user.png" />
          </div>
        </div>
        <div class="list">
          <input
            type="password"
            placeholder="请输入密码"
            v-model="loginPwd"
            @keyup.enter="login"
          />
          <div class="icon">
            <img src="../assets/images/icon-lock.png" />
          </div>
        </div>
        <div class="btn" @click="login" v-loading="loginLoading">登录</div>
      </div>
      <div class="register" v-if="tabActive == 2">
        <div class="list">
          <input
            type="text"
            placeholder="账户名为操作人姓名"
            v-model="registerName"
            @keyup.enter="register"
          />
          <div class="icon">
            <img src="../assets/images/icon-user.png" />
          </div>
        </div>
        <div class="list">
          <input
            type="password"
            placeholder="密码不得少于6位"
            v-model="registerPwd"
            @keyup.enter="register"
          />
          <div class="icon">
            <img src="../assets/images/icon-lock.png" />
          </div>
        </div>
        <div class="list">
          <input
            type="password"
            placeholder="再次输入密码"
            v-model="registerPwdAgain"
            @keyup.enter="register"
          />
          <div class="icon">
            <img src="../assets/images/icon-lock.png" />
          </div>
        </div>
        <div class="btn" @click="register" v-loading="registerLoading">
          注册
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      tabActive: 1, //tab选中项
      loginName: "", //登录名
      loginPwd: "", //登录密码
      loginLoading: "", //登录加载中
      registerName: "", //注册名
      registerPwd: "", //注册密码
      registerPwdAgain: "", //注册确认密码
      registerLoading: "", //注册加载中
    };
  },
  methods: {
    /**
     * 切换tab
     * @param {Number} index - 当前tab
     */
    switchTab(index) {
      this.tabActive = index;
    },
    // 注册
    register() {
      let _this = this;
      let params = {
        userName: _this.registerName,
        password: _this.registerPwd,
        confirmPassword: _this.registerPwdAgain,
      };
      if (_this.registerName == "") {
        _this.$message.error("请输入账户名");
      } else if (_this.registerPwd.length < 6) {
        _this.$message.error("密码不得少于6位");
      } else if (_this.registerPwd != _this.registerPwdAgain) {
        _this.$message.error("两次输入密码不一致");
      } else {
        _this.registerLoading = true;
        _this.axios
          .userRegister(params)
          .then((res) => {
            if (res.code == 200) {
              _this.$message({
                message: '注册成功',
                type: "success",
              });
              _this.tabActive = 1;
            }
            _this.registerLoading = false;
          })
          .catch(function (error) {
            _this.registerLoading = false;
            _this.$message.error(error.msg);
          });
      }
    },
    // 登录
    login() {
      let _this = this;
      let params = {
        userName: _this.loginName,
        password: _this.loginPwd,
      };
      if (_this.loginName == "") {
        _this.$message.error("请输入账户名");
      } else if (_this.loginPwd == "") {
        _this.$message.error("请输入密码");
      } else {
        _this.loginLoading = true;
        _this.axios
          .userLogin(params)
          .then((res) => {
            if (res.code == 200) {
              sessionStorage.setItem("username", res.data);
              _this.$router.push("/Home");
            } else {
              _this.$message.error(res.msg);
            }
            _this.loginLoading = false;
          })
          .catch(function (error) {
            _this.loginLoading = false;
            _this.$message.error(error.msg);
          });
      }
    },
  },
};
</script>

<style scoped lang='less'>
.login {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/login-bg.png);
  background-size: 100% 100%;
  position: relative;
  .form {
    width: 34%;
    height: 47%;
    position: absolute;
    top: 24%;
    right: 12%;
    padding: 1% 2% 0;
    .tabs {
      width: 100%;
      height: .7rem;
      .tab {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .32rem;
        color: #d9d9d9;
        position: relative;
        cursor: pointer;
      }
      .tab.active {
        font-size: .36rem;
        color: #fff;
      }
      .tab.active:after {
        width: 100%;
        height: 5px;
        display: block;
        content: "";
        background-color: #f8b551;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
    .login-content {
      width: 100%;
      .list {
        margin-top: 5%;
      }
      .btn {
        margin-top: 6%;
      }
    }
    .register {
      margin-top: 1.5%;
      width: 100%;
      .list {
        margin-bottom: 3%;
      }
    }
    .list {
      width: 100%;
      height: .6rem;
      position: relative;
      display: flex;
      input {
        width: 100%;
        height: 100%;
        padding-left: .64rem;
        font-size: .28rem;
        color: #d9d9d9;
        border: 2px solid #116bff;
        border-radius: .05rem;
        background-color: transparent;
      }
      input::placeholder {
        color: #d9d9d9;
      }
      .icon {
        width: .64rem;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .btn {
      width: 100%;
      height: .6rem;
      line-height: .6rem;
      text-align: center;
      background-image: url(../assets/images/login-btn.png);
      background-size: 100% 100%;
      font-size: .36rem;
      color: #f2f2f2;
      cursor: pointer;
    }
  }
}
</style>